<script setup lang="ts">
const emit = defineEmits(['closeDialog'])
defineProps({
    title: String,
    dialogVisible: Boolean
})
const close = () => {
    emit('closeDialog', false)
}
</script>
<template>
	<div class="dialog" v-show="dialogVisible" :class="{ fade: dialogVisible }">
		<div class="wrapper" :class="{ fade: dialogVisible }">
			<div class="header">
				<h3>{{ title }}</h3>
				<span class="iconfont icon-close-new" @click="close">X</span>
			</div>
			<div class="body">
				<slot></slot>
			</div>
			<div class="footer">
				<slot name="footer"></slot>
				<el-button>确认</el-button>
			</div>
		</div>
	</div>
</template>
<style scoped lang="less">
.dialog {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0);

	&.fade {
		transition: all 0.4s;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.wrapper {
		width: 600px;
		background-color: #fff;
		border-radius: 4px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;

		&.fade {
			transition: all 0.4s;
			transform: translate(-50%, -50%);
			opacity: 1;
		}

		.body {
			padding: 20px 40px;
			font-size: 16px;

			.icon-warning {
				color: aqua;
				margin-right: 3px;
				font-size: 16px;
			}
		}

		.footer {
			text-align: center;
			padding: 10px 0 30px 0;
		}

		.header {
			position: relative;
			color: #000;
			height: 70px;
			line-height: 70px;
			padding: 0 20px;
			border-bottom: 1px solid #f5f5f5;

			h3 {
				color: #000;
				font-weight: normal;
				font-size: 18px;
			}

			span {
				position: absolute;
				right: 25px;
				top: 25px;
				font-size: 24px;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				color: #999;

				&:hover {
					color: #666;
				}
			}
		}
	}
}
</style>
